<template>
  <el-dialog
      title="拆分信息"
      :visible.sync="mergeShow"
      width="60%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="handleClose"
  >
    <div v-if="formComputed">
      <el-row :gutter="20">
        <el-col :span="8">
          <span style="font-weight: 700">交易号:</span>
          <span style="color: #909399; padding-right: 18px">
                        {{ formComputed.jyls }}
                    </span>
        </el-col>
        <el-col :span="8">
          <span style="font-weight: 700">交易日期:</span>
          <span style="color: #909399">
                        {{ formComputed.jyrq }}
                    </span>
        </el-col>
        <el-col :span="8">
          <span style="font-weight: 700">交易机构:</span>
          <span style="color: #909399">
                        {{ formComputed.jyjg }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <span style="font-weight: 700">含税金额:</span>
          <span style="color: #909399; padding-right: 18px">
                        {{ formComputed.jyje }}
                    </span>
        </el-col>
        <el-col :span="8">
          <span style="font-weight: 700">不含税金额:</span>
          <span style="color: #909399">
                        {{ formComputed.bhsje }}
                    </span>
        </el-col>
        <el-col :span="8">
          <span style="font-weight: 700">税额:</span>
          <span style="color: #909399">
                        {{ formComputed.xxse }}
                    </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-button size="small" @click="add" type="primary">
            新增
          </el-button>
          <el-button
              size="small"
              :disabled="!(selectList && selectList.length)"
              @click="remove"
              type="primary"
          >
            删除
          </el-button>
        </el-col>
      </el-row>

      <tableList
          ref="tableListPageRef"
          border
          maxHeight="330"
          :keySet="keySet2"
          :tableData="list"
          :showSelection="true"
          @handleSelectionChange="handleSelectionChange"
      >
        <template #hsje="row">
          <el-input v-model="row.row.hsje" @change="handleChange('hsje',row.index)" :setPasteDisable="false"
                    placeholder="请输入含税金额"></el-input>
        </template>
        <template #bhsje="row">
          <el-input v-model="row.row.bhsje" @change="handleChange('bhsje',row.index)"
                    placeholder="请输入不含税金额"></el-input>
        </template>
        <template #se="row">
          <el-input v-model="row.row.se" @change="handleChange('se',row.index)" placeholder="请输入税额"></el-input>
        </template>
      </tableList>
      <span slot="footer" class="dialog-footer">
        <div style="float: right; padding-top: 16px">
          <el-button size="small" @click="confirm" type="primary">
              确认
          </el-button>
          <el-button
              size="small"
              @click="handleClose"
              type="primary"
          >
              取消
          </el-button>
        </div>
      </span>
    </div>
  </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import {splitTransactionFlow} from "@/api/transactionFlowInvoice";
import {valitedLimitNumber} from "@/utils/validate";

export default {
  name: 'mergeDialog',
  model: {
    prop: 'mergeShow',
    event: 'change',
  },
  computed: {
    formComputed() {
      let w = this.$store.state.flowInvoice.selectedItems.slice(-1)
      return w[0]
    },
  },
  props: {
    mergeShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      selectList: [],
      keySet2: [
        {
          label: '含税金额',
          englishName: 'hsje',
          isSlot: true,
          slotName: 'hsje',
          width: 180,
        },
        {
          label: '不含税金额',
          englishName: 'bhsje',
          width: 180,
          isSlot: true,
          slotName: 'bhsje',
        },
        {
          label: '税率',
          englishName: 'slv',
          width: 100
        },
        {
          label: '税额',
          englishName: 'se',
          width: 180,
          isSlot: true,
          slotName: 'se'
        },
        {
          label: '单价',
          englishName: 'bhsje',
          width: 180
        },
        {
          label: '数量',
          englishName: 'sl',
          width: 180,
        },
      ],
    }
  },
  created() {
    this.list = []
  },
  methods: {
    handleSelectionChange(val) {
      // 遍历ids 取出 id
      this.selectList = val.ids.map(item => item.id) || [];
    },
    add() {
      this.list.push({
        id: this.list.length,
        jyjg: '',
        bhsje: '',
        slv: this.formComputed.sysl,
        se: '',
        dj: '',
        sl: 1,
      })
    },
    remove() {
      // 根据id删除对应的数据
      this.list = this.list.filter(item => !this.selectList.includes(item.id))
      this.selectList = []
      this.$refs.tableListPageRef.clear()
    },
    async confirm() {
      console.log(123)
      // 执行校验
      let result = this.verification();
      if (!result) {
        return;
      }
      // 构造参数
      let param = {
        id: this.formComputed.id,
        item: this.list
      }
      // 发起请求
      const {data, msg, code} = await splitTransactionFlow(param)
      if (code == 200) {

        this.$message.error("已经200通过了,没关闭弹框.")
        return
        this.$emit("resList", true)
        this.$emit("change", false)
      }
    },
    // 校验
    verification() {
      // 校验拆分明细数量必须大于1
      if (this.list.length < 2) {
        this.$message.error("至少需要将流水拆分成2条记录！")
        return false;
      }
      // 不含税金额 含税金额 税额 不能为空
      for (let i = 0; i < this.list.length; i++) {
        if (!this.list[i].hsje) {
          this.$message.error("第" + (i + 1) + "条拆分信息含税金额不能为空！")
          return false;
        }
        if (!this.list[i].bhsje) {
          this.$message.error("第" + (i + 1) + "条拆分信息不含税金额不能为空！")
          return false;
        }
        if (!this.list[i].se) {
          this.$message.error("第" + (i + 1) + "条拆分信息税额不能为空！")
          return false;
        }
      }
      return true;
    },
    handleClose() {
      this.list = []
      this.selectList = []
      this.$refs.tableListPageRef.clear()
      this.$emit("change", false)
    },
    handleChange(type, index) {
      if (type == 'hsje') {
        this.list[index].hsje = this.bigNumFixed(valitedLimitNumber(this.list[index].hsje, {
          leftLength: 16,
          rightLength: 2,
        }))
      }
      if (type == 'bhsje') {
        this.list[index].bhsje = this.bigNumFixed(valitedLimitNumber(this.list[index].bhsje, {
          leftLength: 16,
          rightLength: 2,
        }))
      }
      if (type == 'se') {
        this.list[index].se = this.bigNumFixed(valitedLimitNumber(this.list[index].se, {
          leftLength: 16,
          rightLength: 2,
        }))
      }
    },
  },
  components: {
    tableList,
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
  animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

::v-deep .el-row {
  margin-bottom: 12px;
}

::v-deep .el-dialog {
  margin-top: 15vh !important;
}
</style>
